<template>
    <div id="searchBox">
        <img src="~@/../static/images/searchBox_img.jpg" class="searchBox_img">
        <input class="hotSearch" value="热门搜索" type="button">

        <!-- 以下是搜索框部分的布局代码 -->
        <div id="container">
            <div class="search bar1">
                <form>
                    <input type="text" placeholder="请输入您要搜索的内容..." v-model="searchKeyWord">
                    <button type="button" @click="search()"></button>
                </form>
            </div>
        </div>
    </div>
</template>

<script>
import SearchBoxImg from '@/../static/images/searchBox_img.jpg'
import axios from 'axios';
import {setCookie,getCookie} from '../assets/js/cookie.js'
import { setTimeout } from 'timers';
export default {
    data(){
        return{
            sbimg:SearchBoxImg,
            //搜索的关键字
            searchKeyWord:''
        }
    },
    methods:{
        search(){
            if(this.searchKeyWord=="" || this.searchKeyWord=="!" || this.searchKeyWord=="?" || this.searchKeyWord=="*"){
                alert("请先输入您要搜索的内容！")
            }else{
            let data={'resourceTitle':this.searchKeyWord}
            setCookie('searchKeyWord',this.searchKeyWord,100*60)
            setTimeout(function(){
            this.$router.push({path:'/searchResult'});
            this.$router.go(0)
            }.bind(this),1000)
            }
        }
    }
    
}
</script>

<style scoped>
    #searchBox{
        position: relative;
        top:0px;
        margin: 0;
        padding: 0;
        height: 140px;
        width: 100%;
    }
    .hotSearch{
        margin: 0;
        padding: 0;
        width: 65px;
        height: 30px;
        position: relative;
        left: 1210px;
        top: -85px;
        background-color:white;
        color:blueviolet;
        box-shadow: none;
        border: 1px solid;
        border-radius: 10px;
        display: block;
    }
    input:hover{
        color:white;
        background-color: blueviolet;
    }
    .searchBox_img{
        width: 100%;
    }

    /* 以下是搜索框部分的CSS样式代码 */
    #container {
            width: 300px;
            height: 80px;
            margin: 0 auto;
            position: relative;
            left: 466px;
            top: -143px;
        }
        div.search {padding: 25px 0;}

        form {
            position: relative;
            width: 300  px;
            margin: 0 auto;
        }

        input, button {
            border: none;
            outline: none;
        }

        input {
            width: 96%;
            height: 30px;
            padding-left: 11px;
        }

        button {
            height: 33px;
            width: 37px;
            cursor: pointer;
            position: absolute;
            border: 1px solid;
            border-radius: 10px;
        }

        /*搜索框1*/
        .bar1 input {
            border: 1px solid blueviolet;
            border-radius: 10px;
            background: #F9F0DA;
            color: #9E9C9C;
        }
        .bar1 button {
            top: 0;
            right: 0;
            background: #268ab4;
            border-radius: 0 5px 5px 0;
        }
        .bar1 button:before {
            content: "\f002";
            font-family: FontAwesome;
            font-size: 16px;
            color: #F9F0DA;
        }
</style>
